<!-- 这是一个实现滚动条自动滚动到窗体底部的简单范例 -->
<template>
    <div>
      <!-- 聊天窗体 -->
      <div class="chat-message-body" id="chatform">
          <div dis-hover v-for="(item,index) in data" :key="index" message-card message-bg>
          {{item}}
          </div>
      </div>
      <!-- 输入窗体 -->
      <Input v-model="form.msg" type="textarea" style="margin:10px 0" placeholder="输入您要发送的信息" :rows="4" />
      <!-- 发送按钮 -->
      <Button  @click="cancel" type="text">取消</Button>
      <Button  @click="sendMsg" type="primary">发送</Button>
    </div>
  </template>
  <script>
  export default {
    name: 'chat',
    data () {
      return {
        data:[1,2,3,4,5,6,7,8,9,10],
        form:{
          msg:""
        }
      }
    },
    methods:{
      sendMsg() {
        this.data .push(form.msg)
        // 滚动
        this.scollToButtom();
      },
      cancel(){
      },
      // 核心代码
      scollToButtom(){
        this.$nextTick(() => {
          let chatform= document.getElementById('chatform') // 获取对象
          chatform.scrollTop = chatform.scrollHeight // 滚动高度
        })
      }
    }
  }
  </script>
  <style scoped>
   .chat-message-body{
      width:545px;
      height: 350px;
      overflow: auto;
      background-color:"#F8F8F6";
    }
    .message-card{
      margin:5px;
      background-color:#FFF;
    }
  </style>